/**
 * 排队屏幕list
 * @auhtor xiaoxujs
 */

import { FC, useCallback, useEffect, useState } from "react";
import { IBaseLaneList, IBaseScreenList } from "../../../../type/chedaoweihu";
import { getBaseScreenList } from "../../api";
import { INoFenye } from "../../../../type/commit";
import { Button, ConfigProvider, message, Table, TableProps } from "antd";
import { TableBox } from "../../style";
import { useWindowFontSize } from "../../../../assets/fun/Antd/configprovider";
import PingmuAddChangeModule from "../PingmuAddChangeModule";


const PingmuList:FC<{
    selectList: IBaseLaneList[]
}> = ({
    selectList
}) => {

    const [pingmuAddChangeShow, setPingmuAddChangeShow] = useState(false); //添加 修改车道弹窗
    const [clickData, setClickData] = useState<IBaseScreenList>(); //点击数据

    const [listData, setListData] = useState<IBaseScreenList[]>([]);
    const [tableLoading, setTableLoading] = useState(false); //tableLoading

    const listFun = useCallback(async () => {
        setTableLoading(true);
        const { code, msg, data } = (await getBaseScreenList()) as INoFenye<IBaseScreenList>;
        if (code === 20000) {
            setListData(data);
            setTableLoading(false);
        } else {
            message.error(msg);
        }
    }, []);
    useEffect(() => {
        listFun();
    }, [listFun])


    //  添加编写车道维护
    const handlePingmuAddChangeCallback = () => {
        setPingmuAddChangeShow(false);
        setClickData(undefined);
        listFun();
    }
    const columns: TableProps<IBaseScreenList>['columns'] = [
        {
            title: '序号',
            align: 'center',
            render: (_, record, index) => <span>{index + 1}</span>
        },
        {
            title: 'IP地址',
            dataIndex: 'ipAddress',
            align: 'center',
        },
        {
            title: '端口号',
            dataIndex: 'portNumber',
            align: 'center',
        },
        {
            title: '用户名',
            dataIndex: 'username',
            align: 'center',
        },
        {
            title: '密码',
            dataIndex: 'pwd',
            align: 'center',
        },
        {
            title: '安装位置',
            dataIndex: 'laneName',
            align: 'center',
        },
        {
            title: '备注',
            dataIndex: 'notes',
            align: 'center',
        },
        {
            title: '操作',
            dataIndex: 'address',
            align: "center",
            render: (_, record) => <>
                <Button type="link" onClick={() => {
                    setClickData(record);
                    setPingmuAddChangeShow(true);
                }} >编辑</Button>
            </>
        },
    ];
    return <TableBox>
        <div className="table_title_Box">
            <div className="table_title_text">户外屏维护</div>
            <Button
                type='primary'
                icon={<span className="iconfont">&#xe620;</span>}
                onClick={() => setPingmuAddChangeShow(true)}
            >
                添加户外屏
            </Button>

        </div>
        <ConfigProvider theme={{
            components: {
                Table: {
                    headerColor: '#8B9BAC',
                    cellFontSize: useWindowFontSize(14),
                    cellPaddingBlock: 7
                }
            }
        }}>
            <Table<IBaseScreenList>
                pagination={false}
                rowKey='id'
                columns={columns}
                dataSource={listData}
                loading={tableLoading}
            />
        </ConfigProvider>
        <PingmuAddChangeModule selectList = {selectList} open={pingmuAddChangeShow} clickData={clickData} handleCallback={handlePingmuAddChangeCallback} />
    </TableBox>
}

export default PingmuList;